<template>
  <div class="_wz_examParameterDetails">
    <table style="font-size: 12px;" cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
      </colgroup>
      <tbody>

      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">考试记录</td>
      </tr>
      <tr>
        <td colspan="2" rowspan="4">
          <div style="display: flex;align-content: center;justify-content: center;">
            <div class="demo-upload-list">
              <Image :src="!!formData.driverAvatar ? apiUrl.imgUrl + formData.driverAvatar : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.driverAvatar ? apiUrl.imgUrl + formData.driverAvatar : 'img/zwtpxd.png']" />
            </div>
            <div style="clear: both;"></div>
          </div>
        </td>
        <td>从业人员</td>
        <td style="color:#2d8cf0;" >{{!!formData.driverName?formData.driverName:'--'}}</td>
        <td>从业类型</td>
        <td style="color:#2d8cf0;">{{!!formData.driverTypeName?formData.driverTypeName:'--'}}</td>
      </tr>
      <tr>
        <td>联系电话</td>
        <td style="color:#2d8cf0;">{{!!formData.driverPhone?formData.driverPhone:'--'}}</td>
        <td>身份证号</td>
        <td style="color:#2d8cf0;">{{!!formData.driverIdentifyNum?formData.driverIdentifyNum:'--'}}</td>
      </tr>
      <tr>
        <td>驾乘车辆</td>
        <td style="color:#2d8cf0;">{{!!formData.driverVehicleNo?formData.driverVehicleNo:'--'}}</td>
        <td>运输类型</td>
        <td style="color:#2d8cf0;">{{!!formData.materialExamTransportTypeName?formData.materialExamTransportTypeName:'--'}}</td>
      </tr>
      <tr>
        <td>经营企业</td>
        <td style="color:#2d8cf0;" colspan="5">{{!!formData.deptName?formData.deptName:'--'}}</td>
      </tr>


      <tr>
        <td>考试名称</td>
        <td style="color:#2d8cf0;">{{formData.materialExamName}}</td>
        <td>考试方向</td>
        <td style="color:#2d8cf0;">{{formData.examPlanDirectionName}}</td>
        <td>考试时间</td>
        <td style="color:#2d8cf0;">{{parseInt(formData.examStudentUseDuration / 60)}} 分钟 {{formData.examStudentUseDuration % 60}} 秒</td>
      </tr>
      <tr>
        <td>满分</td>
        <td style="color:#2d8cf0;">{{formData.examStudentTotalScore}}</td>
        <td>及格分</td>
        <td style="color:#2d8cf0;">{{formData.examStudentPassScore}}</td>
        <td>得分</td>
        <td style="color:#2d8cf0;">{{formData.examStudentScore}}</td>
      </tr>
      <tr>
        <td>题数</td>
        <td style="color:#2d8cf0;">{{formData.examStudentAmount}}</td>
        <td>正确</td>
        <td style="color:#2d8cf0;">{{formData.examStudentCorrect}}</td>
        <td>错误</td>
        <td style="color:#2d8cf0;">{{formData.examStudentWrong}}</td>
      </tr>
      <tr>
        <td>考试时间</td>
        <td colspan="5" style="color:#2d8cf0;">
          <span v-if="!!!formData.examStudentSubmitTime && !!!formData.examStudentAnswerTime">还没参加本课件培训</span>
          <span v-else>
            <span style="margin:0 5px 0 0;">{{formData.examStudentSubmitTime}}</span>
              -
            <span style="margin:0 0 0 5px;">{{formData.examStudentAnswerTime}}</span>
          </span>
        </td>
      </tr>
      <tr>
        <td>正确/错误</td>
        <td colspan="5">
          <template v-for="(item,index) in formData.examStudentPlanDetailList">
            <span v-if="item.correctResult == 0" style="display: inline-block;width: 20px;height: 20px;background: #ed4014;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
            <span v-else-if="item.correctResult == 1" style="display: inline-block;width: 20px;height: 20px;background: #19be6b;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
            <span v-else style="display: inline-block;width: 20px;height: 20px;background: #ccc;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
          </template>
        </td>
      </tr>
      <tr>
        <td>考试证据</td>
        <td colspan="5">
          <div style="display: flex;justify-content: space-around;">
            <div>
              <div class="demo-upload-list">
                <Image :src="!!formData.examStudentFirstImg ? apiUrl.imgUrl + formData.examStudentFirstImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.examStudentFirstImg ? apiUrl.imgUrl + formData.examStudentFirstImg : 'img/zwtpxd.png']" />
              </div>
              <div style="clear: both;text-align: center;">考试签到证据</div>
            </div>


            <div>
              <div class="demo-upload-list">
                <Image :src="!!formData.examStudentSecondImg ? apiUrl.imgUrl + formData.examStudentSecondImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.examStudentSecondImg ? apiUrl.imgUrl + formData.examStudentSecondImg : 'img/zwtpxd.png']" />
              </div>
              <div style="clear: both;text-align: center;">考试点名证据</div>
            </div>


            <div>
              <div class="demo-upload-list">
                <Image :src="!!formData.examStudentThirdImg ? apiUrl.imgUrl + formData.examStudentThirdImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.examStudentThirdImg ? apiUrl.imgUrl + formData.examStudentThirdImg : 'img/zwtpxd.png']" />
              </div>
              <div style="clear: both;text-align: center;">考试交卷签字</div>
            </div>
          </div>
        </td>
      </tr>
<!--      <tr>-->
<!--        <td>考试证明</td>-->
<!--        <td colspan="5">-->
<!--          <div v-if="formData.imgList.length > 0">-->
<!--            <div class="demo-upload-list" v-for="item in formData.imgList">-->
<!--              <viewer style="width: 100%;height: 100%;">-->
<!--                <img :src="apiUrl.imgUrl+item" @error="public.imgDispose" />-->
<!--              </viewer>-->
<!--            </div>-->
<!--            <h6 style="clear: both;"></h6>-->
<!--          </div>-->
<!--          <div v-else>暂无培训证据</div>-->
<!--        </td>-->
<!--      </tr>-->


      </tbody>
    </table>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reformData
export default defineComponent({
  name: 'examParameterDetails',//组件名称
  components: {
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData: {},//培训数据


    });


    //加载数据
    const loadData = ()=>{
      $axios.post(apiUrl.educateExamPlanExamStudentPlanInfo,{uuid:props.selectData.uuid}).then((res) => {
        if (!!res) {
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })


    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})


</script>
<style lang="less">

._wz_examParameterDetails {




  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 12px;
      padding-right: 12px;
    }
  }


  .demo-upload-list {
    float: left;
    margin: 10px;
    display: block;
    width: 100px;
    height: 132px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

    img {
      width: 100%;
      height: 100%;
    }
  }

}
</style>
